<template>
    <div class="app-container">
        <el-form ref="categoryFormRef" :module="categoryForm">
            <el-form-item label="分类名称" label-width="80px" prop="name">
                <el-input maxlength="30" show-word-limit v-model="categoryForm.name"></el-input>
            </el-form-item>
            <el-form-item label="分类图标" label-width="80px">
                <el-image
                    :src="categoryForm.imageUrl"
                    style="width: 100px; height: 100px"
                    fit="fill"
                >
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <el-button
                    class="select-picture-button"
                    type="primary"
                    @click="showSelectPicture = true"
                    >选择图片</el-button
                >
            </el-form-item>
            <el-form-item>
                <el-button type="default" @click="handleGoBack">返回</el-button>
                <el-button type="primary" @click="handleSaveCategory">修改商品</el-button>
            </el-form-item>
        </el-form>
        <!--选择图片-->
        <div v-if="showSelectPicture">
            <el-dialog title="选择图片" :visible.sync="showSelectPicture" width="900px">
                <select-picture
                    @select="handleConfirmSelectPicture"
                    @close="handleCloseSelectPicture"
                ></select-picture>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import SelectPicture from '@/components/ImageGroup/selectPicture';
import {
    getGoodsCategoryList,
    createGoodsCategory,
    updateGoodsCategory,
    deleteGoodsCategory
} from '@/api/goodsCategory';

export default {
    components: {
        SelectPicture
    },
    data() {
        return {
            showSelectPicture: false,
            categoryForm: {
                id: null,
                imageUrl: null,
                name: '',
                parentId: 0,
                sortNo: 0
            }
        };
    },
    created() {
        this.categoryForm.id = this.$route.params.id ? this.$route.params.id : null;
    },
    methods: {
        handleGoBack() {
            this.$router.replace('/goods/category');
        },
        handleConfirmSelectPicture(imageUrl) {
            this.categoryForm.imageUrl = imageUrl;
            this.showSelectPicture = false;
        },
        handleCloseSelectPicture() {
            this.showSelectPicture = false;
        },
        handleSaveCategory() {
            updateGoodsCategory(this.categoryForm).then(res => {
                if (res.data.success === true) {
                    this.$message({
                        message: '修改大类成功！',
                        type: 'sucess',
                        duration: 1000
                    });
                    this.$refs.categoryFormRef.resetFields();
                    this.categoryModalVisible = false;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    width: 50%;
    /deep/ .image-slot {
        display: flex;
        height: 100%;
        border: 1px dashed #e3e2e5;
        justify-content: center;
        align-items: center;
    }
    /deep/ .select-picture-button {
        vertical-align: top;
        margin-left: 24px;
        margin-top: 30px;
    }
}
</style>
